<template>
    <div class="Layout">
        <div class="ViewBox">
            <slot></slot>
        </div>
        <CodeViewVue :list="Filelist" />
    </div>
</template>
<script setup>
import CodeViewVue from '@/components/CodeView.vue';
import { ref } from 'vue';
const pops = defineProps({ list: Object })

const Filelist = ref([]);
for (const key in pops.list) {
    if (Object.hasOwnProperty.call(pops.list, key)) {
        const element = pops.list[key];
        if (key.toLocaleLowerCase().indexOf('.png') != -1) {
            Filelist.value.unshift({
                name: '关系图',
                Code: element,
                type: 'img'
            })
        } else if (key.toLocaleLowerCase().indexOf('.js') != -1 && key != './router.config.js') {
            Filelist.value.push({
                name: key.replace('./', ''),
                Code: element,
                type: 'js'
            })
        } else if (key.toLocaleLowerCase().indexOf('.vue') != -1) {
            Filelist.value.push({
                name: key.replace('./', ''),
                Code: element,
                type: 'vue'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.Layout {
    width: 100%;
    height: 100%;
    display: flex;
}

.ViewBox {
    flex: 0 0 500px;
    padding: 10px;
}
</style>